<template>
<div v-if="attaches">
  <div class="detail-list-line displayflex">
    <div><em  class="gray">{{txt || '电子附件'}}</em>（若附件含有文件信息，请在PC端查看文件详情）</div>
  </div>
  <!-- <div class="add-pic cf">
    <div class="img f-l"><img src="~images/icon/man.png"></div>
    <div class="btn f-l"></div>
  </div> -->
  <div class="add-pic cf">
    <div class="img f-l" v-for="(item, index) in newAttaches">
      <img class="qs-indicator" :src="item.url | fileImg" @click="show(index)">
    </div>
  </div>
  <!-- 预览图片 -->
  <previewer :list="list" :options="options" ref="previewer"></previewer>

</div>
</template>

<script>
  export default {
    props:['attaches', 'txt'],
    data () {
      return {
        list:[],
        options: {
          getThumbBoundsFn (index) {
            let thumbnail = document.querySelectorAll('.qs-indicator')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
      }
    },
    computed:{
      //转换预览图片的数组  过滤掉非图片的文件
      newAttaches(){
        if(this.attaches.length>0){
          // console.log(detailCtx.attaches,"@@@")
          var attachesArr = this.attaches;
          var formatArr = ['gif','jpeg','jpg','png'];
          var picArr = [];
          for(let i in attachesArr){
            var url = attachesArr[i].url
            var format = url.split('.')[1];
            if(formatArr.indexOf(format)>-1){
              picArr.push(attachesArr[i])
            }
          };
          //转换预览图片的url
          let fileImg = this.$options.filters["fileImg"];
          let list = [];
          for(let i in picArr){
            var item = {
              src:fileImg(picArr[i].url)
            }
            this.list.push(item);
          };
          return picArr;
          // console.log(picArr,"最终")
        }
      }
    },
    methods: {
      show (index) {
        this.$refs.previewer.show(index)
      }
    },
  }
</script>